<template>
  <div class="page-wrap">
    <!-- fixed定位的头部 -->
    <header>header</header>

    <!-- 可以滚动的区域 -->
    <main>
      <!-- 内容在这里... -->
      <div></div>
    </main>

    <!-- fixed定位的底部 -->
    <footer>
      <input type="text" placeholder="Footer..." />
      <button class="submit">提交</button>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'index3',
  data() {
    return {
      oHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight
    };
  },
  mounted() {
    /**
     * window.innerWidth/Height  =>  获取浏览器可视区域宽/高度
     * document.documentElement.clientWidth/Height  =>  获取浏览器可视区域宽/高度 document.documentElement指的是html
     * document.body.clientWidth/Height  =>  获取body的宽/高(除去margin) document.body指的是body元素
     * 结果
     * 1. document.documentElement.clientHeight 和 window.innerHeight 是相等的,但是宽度差个滚动条宽度；
     * 2. document.documentElement.clientWidth/Height 和 window.innerWidth/innerHeight 都是获取浏览器可视区域的宽高。其大小随浏览器缩放变化，不因body边距变化；
     * 3. document.body.clientWidth/Height 获取的是body实际宽高，不包括滚动条及工具栏宽高，其大小随body元素实际宽高变化而变化。
     */
    console.log(
      window.innerHeight,
      document.documentElement.clientHeight,
      document.body.clientHeight
    );
    window.addEventListener('resize', this.handleResize);
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    // h5底部输入框被键盘遮挡问题
    handleResize() {
      const height =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      const footerDom = document.querySelector('#footer');
      if (height < this.oHeight) {
        footerDom.style.position = 'static';
      } else {
        footerDom.style.position = 'absolute';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.page-wrap {
  header,
  footer,
  main {
    display: block;
  }
  header {
    position: fixed;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
  }
  footer {
    position: fixed;
    height: 34px;
    left: 0;
    right: 0;
    bottom: 0;
  }
  main {
    /* main绝对定位，进行内部滚动 */
    position: absolute;
    top: 50px;
    bottom: 34px;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性，可以增加弹性 */
    -webkit-overflow-scrolling: touch;

    .content {
      height: 2000px;
    }
  }
}
</style>
